<template>
	<view class="help-item">
		<view class="item-header">
			<!-- 标题 -->
			<text class="item-title">{{ post.title }}</text>

			<!-- 状态标签 -->
			<up-tag 
				:text="getStatusText()" 
				:type="getStatusType()" 
				size="mini" 
			/>
		</view>

		<!-- 内容摘要 -->
		<text class="item-content">{{ post.content }}</text>

		<!-- 标签行 -->
		<view class="item-tags">
			<up-tag :text="post.subCategory" plain size="mini" type="primary" />
			<up-tag :text="post.helpUrgency" plain size="mini" :type="getUrgencyType()" v-if="post.helpUrgency" />
			<up-tag :text="`奖励：${post.helpReward}`" plain size="mini" type="warning" v-if="post.helpReward" />
		</view>

	<!-- 底部信息栏 -->
	<view class="item-footer">
		<!-- 发布者 -->
		<view class="author-info">
			<up-image 
				:src="post.avatar || defaultAvatar" 
				width="40rpx" 
				height="40rpx"
				round
			/>
			<text class="author-name">{{ post.nickname }}</text>
		</view>

		<!-- 联系按钮 -->
		<up-button 
			type="primary" 
			size="small" 
			@click.stop="handleContact"
			:disabled="post.helpStatus === 'resolved'"
			:color="post.helpStatus === 'resolved' ? '#ccc' : '#722ed1'"
		>
			{{ post.helpStatus === 'resolved' ? '已解决' : '我来帮忙' }}
		</up-button>
	</view>
</view>
</template>

<script setup>
const props = defineProps({
	post: {
		type: Object,
		required: true
	}
});

const defaultAvatar = 'https://picsum.photos/200/200?random=avatar';

// 联系求助者
const handleContact = () => {
	// 检查登录状态
	const token = uni.getStorageSync('token');
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1000);
		return;
	}

	// 显示联系方式（聊天功能暂未实现）
	uni.showModal({
		title: '联系求助者',
		content: props.post.contactInfo || '暂无联系方式\n\n聊天功能即将上线...',
		showCancel: false,
		confirmText: '好的'
	});
};

// 获取状态文本
const getStatusText = () => {
	const statusMap = {
		'pending': '待解决',
		'in_progress': '进行中',
		'resolved': '已解决'
	};
	return statusMap[props.post.helpStatus] || '待解决';
};

// 获取状态类型（颜色）
const getStatusType = () => {
	const typeMap = {
		'pending': 'error',
		'in_progress': 'warning',
		'resolved': 'success'
	};
	return typeMap[props.post.helpStatus] || 'info';
};

// 获取紧急程度类型
const getUrgencyType = () => {
	const typeMap = {
		'紧急': 'error',
		'今天内': 'warning',
		'不急': 'info'
	};
	return typeMap[props.post.helpUrgency] || 'info';
};
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.help-item {
	@include card;
	padding: $spacing-lg;
	margin-bottom: $spacing-base;
	@include slide-up;

	&:active {
		background: $bg-hover;
		box-shadow: $shadow-md;
	}

	.item-header {
		@include flex-between;
		margin-bottom: $spacing-base;
		gap: $spacing-sm;

		.item-title {
			flex: 1;
			font-size: $font-lg;
			font-weight: $font-semibold;
			color: $text-primary;
			line-height: $line-height-tight;
			@include ellipsis(1);
		}
	}

	.item-content {
		font-size: $font-base;
		color: $text-secondary;
		line-height: $line-height-base;
		@include ellipsis(2);
		margin-bottom: $spacing-base;
	}

	.item-tags {
		display: flex;
		gap: $spacing-sm;
		flex-wrap: wrap;
		margin-bottom: $spacing-lg;
	}

	.item-footer {
		@include flex-between;

		.author-info {
			display: flex;
			align-items: center;
			gap: $spacing-sm;

			.author-name {
				font-size: $font-sm;
				color: $text-tertiary;
				font-weight: $font-medium;
			}
		}
	}
}
</style>

